/* ======================================================
   <!-- Table -->
/* ====================================================== */
@import '@poemkit/components/_utils/styles/_variable-and-mixin.scss';

/*
 * 1. Generic
*/


/*
 ---------------------------
 1. Generic
 ---------------------------
 */
$table-border-color: #EEEEEE;
$table-border-headerbg: #FAFAFA;
$table-alternant-bg: #FAFAFA;

table.poemkit-table,
.poemkit-table table {

	margin: 0;
	padding: 0;
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: show;
	border: 1px solid $table-border-color;
	width: 100%;
	border-color: $table-border-color;

	caption {
		padding: 0.875rem 0;
	}


	th,
	td {
		border-color: $table-border-color;
		border-left: 1px solid $table-border-color;
		border-width: 0 0 0 1px;
		margin: 0;
		overflow: visible;
		padding: 0.5rem 0.75rem;
		vertical-align: top;


	}

	thead {
		background: $table-border-headerbg;
		vertical-align: bottom;

		th {
			text-align: inherit; /* Required */

			&.poemkit-t-r {
				text-align: right;
			}

			&.poemkit-t-l {
				text-align: left;
			}


			&.poemkit-t-c {
				text-align: center;
			}

			/* The breakpoint is the same as bootstrap 4 */
			/*
			--breakpoint-xs:0;
			--breakpoint-sm:576px;
			--breakpoint-md:768px;
			--breakpoint-lg:992px;
			--breakpoint-xl:1200px;
			*/
			@media all and (max-width: 576px) {
				&.poemkit-t-r--sm {
					text-align: right;
				}

				&.poemkit-t-l--sm {
					text-align: left;
				}
				&.poemkit-t-c--sm {
					text-align: center;
				}
			}

			@media all and (max-width: 768px) {
				&.poemkit-t-r--md {
					text-align: right;
				}

				&.poemkit-t-l--md {
					text-align: left;
				}
				&.poemkit-t-c--md {
					text-align: center;
				}
			}

			@media all and (max-width: 992px) {
				&.poemkit-t-r--lg {
					text-align: right;
				}

				&.poemkit-t-l--lg {
					text-align: left;
				}
				&.poemkit-t-c--lg {
					text-align: center;
				}
			}


			@media all and (max-width: 1200px) {
				&.poemkit-t-r--xl {
					text-align: right;
				}

				&.poemkit-t-l--xl {
					text-align: left;
				}
				.poemkit-t-c--xl {
					text-align: center;
				}
			}


		}
	}

	tfoot {
		border: 1px solid $table-border-color;
	}


	td {
		background-color: transparent;

	}



}

/*-- Table Effect by Default --*/
/* Compatible with  Uix Shortcodes (WordPress Plugin) and Block Button Link */
.poemkit-table a:not(.poemkit-sc-btn):not(.wp-block-button__link):not(.poemkit-btn) {
    color: $highlight-color1;
}

.poemkit-table a:not(.poemkit-sc-btn):not(.wp-block-button__link):not(.poemkit-btn):hover {
    color: $highlight-color2;
    text-decoration: underline;
}

.poemkit-table a:not(.poemkit-sc-btn):not(.wp-block-button__link):not(.poemkit-btn):hover img {
    text-decoration: none;
}


@media all and (max-width: 768px) {

	table.poemkit-table.is-responsive,
	.poemkit-table.is-responsive table {

		thead {
		    display: none;
		}
		tbody {

			tr {
				@include outer-shadow( 'light' );
				margin-bottom: 1rem;
				display: block;
			}

			tr:nth-of-type(even) {
				//background-color: $table-alternant-bg;
			}

			td {
				display: block;



				&::before {
					content: attr(data-table);
					display: block;
					float: left;
					width: 40%;
					font-weight: bold;
					border-right: 1px solid $table-border-color;
					margin-right: 0.5rem;
				}

				&::after {
					content: '';
					display: block;
					clear: both;
				}
			}

		}


	}


	/* With scroll bars */
	.js-poemkit-table--responsive-scrolled table,
	table.js-poemkit-table--responsive-scrolled {
		display: block;
		width: 100%;
		border-bottom: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		overflow: auto;


		thead {
			display: block;
			float: left;
			width: 100px;
			border-bottom: 1px solid $table-border-color;

			th {
				display: block;

				&:not(last-child) {
					border-bottom: 0;
				}

			}
		}
		tbody {
			width: calc(100% - 100px);
			display: block;
			float: left;
			overflow-x: scroll;
			border-bottom: 1px solid $table-border-color;
			border-right: 1px solid $table-border-color;
		}
		thead tr,
		tbody tr {
			display: block;
		}
		th,
		tbody td {
			box-sizing: border-box;
			overflow-x: hidden;
			overflow-y: auto;

			&:first-child {
				border-top: 0;
			}

			&:not(last-child) {
				border-bottom: 0;
				border-right: 0;
			}

		}


		tbody tr {
			display: table-cell;

		}

		tbody td {
		    display: block;
		}



	}

}


table.poemkit-table--bordered,
.poemkit-table--bordered table {

	border: 1px solid $table-border-color;
	border-collapse: collapse;
	width: 100%;


	td,
	th {
		border: 1px solid $table-border-color;
		padding: 0.6875rem;
	}

}

table.poemkit-table--noborder,
.poemkit-table--noborder table {
	border: none;
}

table.poemkit-table--top-noborder,
.poemkit-table--top-noborder table {
	td {
		border-top: none;
	}
}

table.poemkit-table--bottom-noborder,
.poemkit-table--bottom-noborder table {
	td {
		border-bottom: none;
	}
}

table.poemkit-table--alternant-row,
.poemkit-table--alternant-row table {
	tbody tr:nth-child(even) {
		background-color: $table-alternant-bg;
	}
}

table.poemkit-table--alternant-col,
.poemkit-table--alternant-col table {
	
    tbody tr td:first-child {
		color: #fff;
	}

	col:nth-child(odd) {
		background-color: $table-alternant-bg;
	}
	

	col:first-child {
		background-color: #000;
	}

}

table.poemkit-table--striped tr:nth-child(2n-1) td,
.poemkit-table--striped table tr:nth-child(2n-1) td {
	background-color: $table-border-headerbg;
}

table.poemkit-table--per-line,
.poemkit-table--per-line table {

	td {
		border-bottom: 1px solid $table-border-color;
		border-width: 0 0 1px;
	}


	tbody tr:last-child td {
		border-bottom-width: 0;
	}

}

table.is-horizontal,
.is-horizontal table {

	td {
		border-bottom: 1px solid $table-border-color;
		border-width: 0 0 1px;
	}

	tbody tr:last-child td {
		border-bottom-width: 0;
	}

	th {

		border-bottom: 1px solid $table-border-color;
	}

}


@media all and (max-width: 768px) {


	table.poemkit-table--per-line.is-responsive,
	.poemkit-table--per-line.is-responsive table {

		tbody tr:last-child td {
			border-bottom-width: 1px;
		}

	}

	table.is-horizontal.is-responsive,
	.is-horizontal.is-responsive table {

		tbody tr:last-child td {
			border-bottom-width: 1px;
		}


	}

}

